這次的文章是來自Alpha Camp的作業: 前面先完成了一個從零開始的切版練習
接下來要來模擬面試:介紹你的專案
我先選擇了部落格文章版，專案請看:我的codepen作業

Q1: 你為何會選擇這個專案？

Ans: 這個指定切版練習，電商E-SHOP平台是我們日常生活中最常見的一種網頁，只要線上購物都會用到它，也就是說每個店家若是要經營網路平台，都需要這種平台，Tshirt的E-shop會有導覽和不同種分類讓客戶去快速找到自己想要的產品，並透過產品和實穿照的穿插去吸引客戶，並且有訂閱信件的服務來拉攏固定客戶，是一個很基本完整的線上商店排版。

Q2: 你使用了什麼技術？

Ans: 在此專案我使用了Grid去做導覽列和產品主頁的配版，搭配 media query 能針對不同螢幕的尺寸大小，快速切換不同的排版模式。
並且使用:hover僞元素的動畫搭配 position 的用法設計有滑鼠箭頭滑過指定區域就可以看到另一張照片實穿照。

Q3: 哪部分你相對能掌握？哪裡花了最多時間？
Grid 的運用在做產品主頁RWD排版部分很快就完成了，這次在導覽列位置的排版上花最多時間。

Q4: 過程中碰到什麼困難？又如何克服？（例如：查找網路文件）

在導覽列排版的部分因為要把searchbar的切換位置在螢幕變寬的時候，跟其他icon放在一起, 我覺得比較複雜，就去重新找grid 和grid-area 使用方式，我會讀他的原文文件定義和用法去查看類似的用法套用到我的專案。
另外，我在尋找如何切換背景圖的時候，也在尺寸超出的問題卡住，我會去查找網路文件類似的用法，研究各種圖片尺寸修整問題去找到適合我的用法。

Q5: 過程中你有對哪個前端技術有特別深刻的學習？

我覺得透過這個專案，我對使用position定位的用法更熟悉，之前使用的時候只覺得很像搞不清楚，這次把static, relative, fixed, absolute 重新複習一遍，然後發現absolute定位很好用，還可以用它來搭配visibility:hidden來隱藏元素，並認識了sticky的用法。
position: sticky 在原本的定位位置上，scroll往下拉會發現它會黏在視窗的上方，不管下拉到哪個畫面都會在那。
這邊就可以看 w3school範例的用法
很常看到網頁出來的彈跳視窗、廣告或者通知等都是使用sticky的用法。

另外，我會想再仔細研究grid的用法，來看如何排版出更有彈性變化的畫面。